<template>
  <div class="animate-pulse rounded-xl grid gap-[0.625rem]" :class="[`grid-cols-${columnCount}`]">
    <div class="h-30 bg-bg-black-4 rounded-md grid gap-[0.625rem]" :class="[`grid-cols-${columnCount}`]"></div>
    <div class="h-30 bg-bg-black-4 rounded-md grid gap-[0.625rem]" :class="[`grid-cols-${columnCount}`]"></div>
    <div class="h-30 bg-bg-black-4 rounded-md grid gap-[0.625rem]" :class="[`grid-cols-${columnCount}`]"></div>
  </div>
</template>
<script setup lang="ts">
  interface Props {
    columnCount?: number
  }

  const props = withDefaults(defineProps<Props>(), {
    columnCount: 1
  })
</script>